<template>
    <!-- 搜索区域 -->
    <div style="display: flex">
        <el-input v-model="searchUsername" placeholder="请输入学员姓名"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-input v-model="searchCourseName" placeholder="请输入课程名称"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-input v-model="searchExamName" placeholder="请输入试卷名称"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" :row-style="{ height: '77px' }" border
        style="width: calc(100vw - 240px);margin-top: 20px;height: 75vh;color: #909399;font-size: 15px;">
        <el-table-column align="center" prop="courseName" label="课程名称" />
        <el-table-column align="center" prop="exampaperName" label="试卷名称" />
        <el-table-column align="center" prop="username" label="学员姓名" />
        <el-table-column align="center" prop="createTime" label="签到时间" sortable />
        <el-table-column prop="photo" label="照片" align="center">
            <template v-slot="scope">
                <div @click="openPreview(scope.row.photo)" style="cursor: pointer;">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.photo"></el-image>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="url" label="手签" align="center">
            <template v-slot="scope">
                <div @click="openPreview(scope.row.url)" style="cursor: pointer;">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.url"></el-image>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div style="margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <ImagePreview ref="preview" :imageUrl="currentPreviewImage" />
</template>

<script>
import { serverIp } from "~/utils/config.js"
import request from "~/utils/request.js";
import { ElMessage } from "element-plus";
import ImagePreview from '~/pages/ImagePreview.vue';

export default {
    components: {
        ImagePreview
    },
    data() {
        return {
            serverIp: serverIp, //附件上传路径
            tableData: [],
            searchUsername: '',
            searchCourseName: '',
            searchExamName: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            currentPreviewImage: '' // 当前预览的图片URL
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            request.get("/exam-sign/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&username=" + this.searchUsername + "&courseName=" + this.searchCourseName + "&examName=" + this.searchExamName).then(res => {
                if (res.code === '200') {
                    for (let key in res.data) {
                        if (key === "records") {
                            this.tableData = res.data[key];
                        } else if (key === "total") {
                            this.total = res.data[key];
                        }
                    }
                } else {
                    ElMessage.error("错误" + res.msg)
                }
            })
        },
        handleCurrentChange(item) {
            this.currentPage = item
            this.load()
        },
        handleSizeChange(item) {
            this.pageSize = item
            this.load()
        },
        openPreview(imageUrl) {
            if (!imageUrl) return;
            this.currentPreviewImage = imageUrl;
            this.$nextTick(() => {
                this.$refs.preview.open();
            });
        }
    }
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
